const getData = {
  type: `1`,
  page: `1`,
  limit: `10`,
}

const postData = {
  des: ``,
  img: ``,
  title: ``,
  type: ``,
  url: ``

}
let editData

const upload = layui.upload;
const element = layui.element;
const layer = layui.layer;
const $ = layui.$;
const util = layui.util;
const form = layui.form;
const laypage = layui.laypage

// todo 点击事件 tab栏切换
const textObj = document.querySelector(`#text`)
const picObj = document.querySelector(`#pic`)
document.querySelector(`#title`).addEventListener(`click`, function (e) {
  // if (e.target.tagName === `DIV`) {
  //     // console.log(1);
  //     document.querySelector(`.active`).classList.remove(`active`)
  //     e.target.classList.add(`active`)
  // }
  if (e.target.classList.contains(`text`)) {
    document.querySelector(`.active`).classList.remove(`active`)
    e.target.classList.add(`active`)
    document.querySelector(`.hide`).classList.remove(`hide`)
    picObj.classList.add(`hide`)
    renderText(getData)
  }
  if (e.target.classList.contains(`pic`)) {
    document.querySelector(`.active`).classList.remove(`active`)
    e.target.classList.add(`active`)
    document.querySelector(`.hide`).classList.remove(`hide`)
    textObj.classList.add(`hide`)
    renderPic(getData)
  }
})

// todo 封装文字类型渲染函数
async function renderText(getData) {
  const { data: { data } } = await axios.get(`/ydd_link/list`, { params: getData })
  console.log(data);
  document.querySelector(`#text tbody`).innerHTML = data.data.map(({ title, des, type, url, id }, index) => `
     <tr>
      <td>${index + 1}</td>
      <td>${title}</td>
      <td>${des}</td>
      <td id="td1">${type == 1 ? `<i class="layui-icon layui-icon-edit"></i> 文字类型` : `<i class="layui-icon layui-icon-picture"></i> 图片类型`}</td>
      <td>${url}</td>
      <td>
        <button class="layui-btn layui-btn-normal layui-btn-radius edit" data-id="${id}  "><i class="layui-icon layui-icon-edit"></i>编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-radius del" data-id="${id}"><i class="layui-icon layui-icon-clear"></i>删除</button>
      </td>
    </tr> 
    `).join(``)
  renderPage(data)
}
renderText(getData)

// todo 封装图片类型渲染函数
async function renderPic(getData) {
  // 修改状态 改变请求类型
  getData.type = `2`
  // console.log(getData);
  const { data: { data } } = await axios.get(`/ydd_link/list`, { params: getData })
  // console.log(data);
  document.querySelector(`#pic tbody`).innerHTML = data.data.map(({ des, img, type, url, id }, index) => `
    <tr>
      <td>${index + 1}</td>
      <td>${des}</td>
      <td><img src="http://124.223.14.236:8060/${img}" alt=""></td>
      <td id="td1">${type == 1 ? `<i class="layui-icon layui-icon-edit"></i> 文字类型` : `<i class="layui-icon layui-icon-picture"></i> 图片类型`}</td>
      <td>${url}</td>
      <td>
        <button class="layui-btn layui-btn-normal layui-btn-radius edit" data-id="${id}  "><i class="layui-icon layui-icon-edit"></i>编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-radius del" data-id="${id}"><i class="layui-icon layui-icon-clear"></i>删除</button>
      </td>
    </tr> 
    `).join(``)
  renderPage1(data)
  getData.type = `1`
}

// todo 弹出层
let textLink = `
<div class="layui-form" id="form" lay-filter="filter-test-layer" style="margin: 16px; ">
<div class="demo-login-container">
  <!-- 下拉框 -->
  <h3>链接类型</h3>
  <div class="layui-form layui-row layui-col-space16 layui-form-item">
    <div class="layui-col-md8 ">
      <select lay-verify="required" name="type" id="select" lay-filter="demo-select-filter">
        <option value="">请选择</option>
        <option value="1">文字链接</option>
        <option value="2">图片链接</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-col-md8 hide" id="stitle">
  <h3>标题</h3>
    <div class="layui-input-wrap">
      <!-- <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-username"></i>
      </div> -->
      <input type="text" name="title" value="" lay-verify="required" placeholder="标题" lay-reqtext="请填写标题"
        autocomplete="off" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-form-item">
  <h3>链接地址</h3>
  <div class="layui-input-wrap">
      <!-- <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-password"></i>
      </div> -->
      <input type="text" name="url" value="" lay-verify="required" placeholder="链接地址" lay-reqtext="请填写链接地址"
        autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
  <h3>链接描述</h3>
    <div class="layui-input-wrap">
      <textarea name="des" placeholder="链接描述" lay-verify="required" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item hide" id="spic" >
  
  <button type="button" class="layui-btn" id="ID-upload-demo-btn">
  <i class="layui-icon layui-icon-upload"></i> 图片上传
</button>
<div style="width: 132px;">
  <div class="layui-upload-list" >
    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;" >
      </div>
    </div>
    </div>

  
  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo1">添加</button>
  </div>

  

</div>
</div>
`

let textLink1 = `
<div class="layui-form" id="form" lay-filter="filter-test-layer" style="margin: 16px; ">
<div class="demo-login-container">
  <!-- 下拉框 -->
  <h3>链接类型</h3>
  <div class="layui-form layui-row layui-col-space16 layui-form-item">
    <div class="layui-col-md8 ">
      <select lay-verify="required" name="type" id="select" lay-filter="demo-select-filter">
        <option value="">请选择</option>
        <option value="1">文字链接</option>
        <option value="2">图片链接</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-col-md8 hide" id="stitle">
  <h3>标题</h3>
    <div class="layui-input-wrap">
      <!-- <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-username"></i>
      </div> -->
      <input type="text" name="title" value="" lay-verify="required" placeholder="标题" lay-reqtext="请填写链接类型"
        autocomplete="off" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-form-item">
  <h3>链接地址</h3>
  <div class="layui-input-wrap">
      <!-- <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-password"></i>
      </div> -->
      <input type="text" name="url" value="" lay-verify="required" placeholder="链接地址" lay-reqtext="请填写链接地址"
        autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
  <h3>链接描述</h3>
    <div class="layui-input-wrap">
      <textarea name="des" placeholder="链接描述" lay-verify="required" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item hide" id="spic" >
  
  <button type="button" class="layui-btn" id="ID-upload-demo-btn">
  <i class="layui-icon layui-icon-upload"></i> 图片上传
</button>
<div style="width: 132px;">
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
      </div>
    </div>
    </div>

  
  <div class="layui-form-item">
    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo2">添加</button>
  </div>

  

</div>
</div>
`



// todo 新增弹出层
layui.use(function () {

  // 提交事件
  util.on('lay-on', {

    'test-page-custom': function () {
      var upload = layui.upload;

      layer.open({
        type: 1,
        area: '450px',
        resize: false,
        shadeClose: true,
        title: '添加友情链接',
        content: textLink,
        success: function () {
          // 对弹层中的表单进行初始化渲染
          form.render();
          // 注册点击事件 判断是文字还是图片
          // console.log(document.querySelector(`.layui-anim :nth-child(2)`));
          // document.querySelector(`.layui-anim :nth-child(2)`).addEventListener(`click`, function () {
          //   console.log(1);
          //   document.querySelector(`#form .hide`).classList.remove(`hide`)
          //   // document.querySelector(`#spic`).classList.add(`hide`)
          // })

          // 表单提交事件
          form.on('submit(demo1)', function (data) {
            var field = data.field; // 获取表单字段值
            for (let k in field) {
              // console.log(field[k]);
              if (k == `file`) {
                continue
              }
              postData[k] = field[k]
            }
            console.log(postData);
            // 此处可执行 Ajax 等操作
            // todo 封装新增函数
            async function post() {
              try {
                const res = await axios.post(`/ydd_link/add`, JSON.stringify(postData), { headers: { 'Content-Type': 'application/json' } })
                layer.msg(`新增链接成功`, { icon: 1 }, () => {

                  layer.closeAll('page'); // 关闭所有的页面层
                  // !!
                  postData.type == 1 ? document.querySelector(`#title .text`).click() : document.querySelector(`#title .pic`).click()

                })
              } catch (err) {
                layer.alert(`请上传图片`)
                console.log(`请求出错`, err);
              }
            }
            post()
            // console.log(`提交成功`);


            return false; // 阻止默认 form 跳转
          });
        }
      });

    }
  })

});


// todo获取图片
// document.querySelector(`#ID-upload-demo-btn`)


document.querySelector(`.add`).addEventListener(`click`, function (e) {
  setTimeout(function () {

    var uploadInst = upload.render({
      elem: '#ID-upload-demo-btn',
      url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      before: function (obj) {
        // 预读本地文件示例，不支持ie8
        obj.preview(function (index, file, result) {
          $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）

          const fd = new FormData()
          fd.append(`file`, file)
          async function getpic() {
            const { data: { data: { savePath } } } = await axios.post(`/common/upload?type=images`, fd, {
              headers: {
                "Content-Type": "multipart/form-data"
              }
            })
            // console.log(savePath);
            postData.img = savePath
          }

          getpic()
        });

      },
      done: function (res) {

        // 上传成功的一些操作
        // …
        // $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
      },

    });


  }, 500)
})

// // todo事件委托判断下拉框状态
// document.querySelector(`body`).addEventListener(`change`,function(e){
//     if(e.target)
// })

// todo 下拉框判断
layui.use(function () {
  // var form = layui.form;
  // var layer = layui.layer;
  // select 事件
  form.on('select(demo-select-filter)', function (data) {
    var elem = data.elem; // 获得 select 原始 DOM 对象
    var value = data.value; // 获得被选中的值
    var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

    // layer.msg(this.innerHTML + ' 的 value: ' + value); // this 为当前选中 <option> 元素对象
    if (value == 1) {
      document.querySelector(`#form .hide`).classList.remove(`hide`)
      document.querySelector(`#spic`).classList.add(`hide`)
    }
    if (value == 2) {
      document.querySelectorAll(`#form .hide`).forEach(ele => {
        ele.classList.remove(`hide`)
      })
      document.querySelector(`#stitle`).classList.add(`hide`)
    }
    console.log(value);
  });
});


// todo 事件委托完成删除编辑
document.querySelector(`.dAll`).addEventListener(`click`, async function (e) {
  // todo 删除模块
  if (e.target.classList.contains(`del`)) {
    // console.log(e.target.dataset.id);
    const id = e.target.dataset.id
    try {
      await axios.get(`/ydd_link/del`, { params: { id } })
      layer.msg(`删除成功`, { icon: 1 }, () => {
        // document.querySelector(`#title .text`).click()//点击刷新
        renderText(getData)
        renderPic(getData)
      })
    } catch (err) {
      layer.msg(`删除失败`)
      console.log(err);
    }
  }


  // todo 编辑模块反显
  if (e.target.classList.contains(`edit`)) {

    const id = e.target.dataset.id
    layer.open({
      type: 1,
      area: '450px',
      resize: false,
      shadeClose: true,
      title: '编辑友情链接',
      content: textLink1,
      success: function () {

        // 编辑修改图片
        var uploadInst = upload.render({
          elem: '#ID-upload-demo-btn',
          url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
          before: function (obj) {
            // 预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
              $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）

              const fd = new FormData()
              fd.append(`file`, file)
              async function getpic() {
                const { data: { data: { savePath } } } = await axios.post(`/common/upload?type=images`, fd, {
                  headers: {
                    "Content-Type": "multipart/form-data"
                  }
                })
                // console.log(savePath);
                editData.img = savePath
              }

              getpic()
            });

          },
          done: function (res) {

            // 上传成功的一些操作
            // …
            // $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
          },

        });

        form.render();
        // 反显
        async function editPost() {
          const { data: { data } } = await axios.get(`/ydd_link/rowInfo`, { params: { id } })
          // console.log(data);
          form.val('filter-test-layer', data);

          // 判断点击的是文字链接还是图片链接
          // console.log(document.querySelector(`.layui-select-title input`).value);
          if (document.querySelector(`.layui-select-title input`).value === `文字链接`) {
            data.type = 1
            // console.log(data);
            document.querySelector(`#form .hide`).classList.remove(`hide`)
            document.querySelector(`#spic`).classList.add(`hide`)
          } else {
            data.type = 2
            // console.log(data);
            document.querySelectorAll(`#form .hide`).forEach(ele => {
              ele.classList.remove(`hide`)
            })
            document.querySelector(`#stitle`).classList.add(`hide`)
          }

          // 图片反显
          document.querySelector(`.layui-upload-img`).src = `http://124.223.14.236:8060/${data.img}`


          // 接受 编辑数据
          console.log(data);
          editData = data
          console.log(editData);

          // if(document,queueMicrotask(`.layui-layer-title`)===`编辑友情链接`){

          // }

        }
        editPost()
        // 编辑提交
        form.on('submit(demo2)', function (data) {


          var field = data.field; // 获取表单字段值
          for (let k in field) {
            // console.log(field[k]);
            if (k == `file`) {
              continue
            }
            editData[k] = field[k]
          }
          console.log(editData);
          // 此处可执行 Ajax 等操作

          // console.log(`提交成功`);
          // todo 封装修改函数
          async function editPost() {
            try {
              console.log(editData);
              const res = await axios.post(`/ydd_link/update`, JSON.stringify(editData), { headers: { 'Content-Type': 'application/json' } })
              layer.msg(`编辑链接成功`, { icon: 1 }, () => {

                layer.closeAll('page'); // 关闭所有的页面层
                editData.type == 1 ? document.querySelector(`#title .text`).click() : document.querySelector(`#title .pic`).click() //刷新

              })
            } catch (err) {
              console.log(`请求出错`, err);
            }
          }
          editPost()

          return false; // 阻止默认 form 跳转
        });


      }
    })
  }


})


// todo text分页模块
function renderPage(data) {
  laypage.render({
    elem: `page-box`, // 绑定分页容器，值可以是容器 id 或 DOM 对象，这里id不能加 # 号
    count: data.count,// 数据总数，从后端得到
    curr: data.currentPage, // 当前第几页(会决定第几个按钮高亮)
    limit: data.pageSize, // 每页显示多少条数据
    limits: [10, 20, 40, 50, 100], //下拉框每一项的数据
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],// 排版
    jump: function (obj, first) {
      //分页切换时会触发该回调函数
      // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据// console.log(obj.limit); // 得到每页显示的条数
      //完成分页切换效果 => 核心就是发ajax请求
      //! 记得修改 query对象 page 、limit 的值
      getData.page = String(obj.curr)
      getData.limit = String(obj.limit)
      //     console.log(query)
      //     console.log(first)
      // true: 分页渲染时
      // undefined:切换分页时
      if (!first) {
        renderText(getData)

      }

    }
  })
}
// todo pic分页模块
function renderPage1(data) {
  laypage.render({
    elem: `page-box1`, // 绑定分页容器，值可以是容器 id 或 DOM 对象，这里id不能加 # 号
    count: data.count,// 数据总数，从后端得到
    curr: data.currentPage, // 当前第几页(会决定第几个按钮高亮)
    limit: data.pageSize, // 每页显示多少条数据
    limits: [10, 20, 40, 50, 100], //下拉框每一项的数据
    layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],// 排版
    jump: function (obj, first) {
      //分页切换时会触发该回调函数
      // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据// console.log(obj.limit); // 得到每页显示的条数
      //完成分页切换效果 => 核心就是发ajax请求
      //! 记得修改 query对象 page 、limit 的值
      getData.page = String(obj.curr)
      getData.limit = String(obj.limit)
      //     console.log(query)
      //     console.log(first)
      // true: 分页渲染时
      // undefined:切换分页时
      if (!first) {
        renderPic(getData)

      }

    }
  })
}